<template>
  <div class="product-list-box">
    <div class="list-main">
      <el-carousel
        height="240px"
        direction="vertical"
        :autoplay="true"
        ref="carouselList"
        :interval="4000"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="(items, _index) in list"
          :key="'pageCount_' + _index"
        >
          <div v-for="(item, index) in items" :key="'product_list_' + index">
            <!--<product-list
              :title="item.proName"
              :title-depict="item.titleDepict"
              :profit="item.profit"
              :profitDepict="item.profitDepict"
              :buyingPrice="item.buyingPrice"
              :buyingPriceDepict="item.buyingPriceDepict"
              :isHot="item.isHot"
              @detail="goDetail(item)"
            ></product-list>-->
            <product-list
              :title="item.proName"
              :profit="item.proProfit"
              :isHot="true"
              @detail="goDetail(item)"
            ></product-list>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="arrows-icon">
      <!-- <img src="../../assets/images/more-product.svg" @click="arrowsBtn" /> -->
      <img src="../../assets/images/more-product.svg" @click="arrowsBtn" />
    </div>
    <div class="more-btn">
      <span @click="moreProduct">更多</span>
    </div>
  </div>
</template>

<script>
import ProductList from "@/components/ProductList.vue";

export default {
  name: "ProductListBox",
  components: {
    ProductList
  },
  data() {
    return {
      // data,
      data: null,
      productInfo: null,
      pageNum: Math.floor(Math.random() * 10 + 1),
      list: []
    };
  },
  methods: {
    arrowsBtn() {
      this.$refs.carouselList.next();
    },
    moreProduct() {
      // 跳转到更页面
      this.$router.push({
        name: "ProductionList",
        params: { isHeader: false }
      });
    },
    initData() {
      let arr = [...this.data];
      for (let i = 0; i < this.data.length; i = i + 3) {
        let array = arr.splice(0, 3);
        this.list.push(array);
      }
    },
    // 跳转到详情页面
    goDetail(item) {
      let session = window.sessionStorage;
      session.setItem("productDetailId", item.id);
      this.$router.push("/ProductDetail");
    },
    // 获取产品信息
    getProduct() {
      // let self = this;
      let params = {
        pageNum: this.pageNum,
        pageSize: 12,
        searchCriteria06: 1
      };
      this.$remote(
        "/runtime/pocfinancial/selectPocFinancialListForPage.action",
        params
      ).then(res => {
        this.data = res.list;
        this.initData();
      });
    }
  },
  created() {
    this.getProduct();
  },
  mounted() {}
};
</script>

<style scoped lang="stylus">
.product-list-box
  width 100%
  padding 10px
  margin 0px auto
  padding-left 40px
  .list-main
    height 240px
    overflow hidden
  .arrows-icon
    height 40px
    overflow hidden

    img
      display block
      width 100px
      height 40px
      margin auto

      &:hover
        cursor pointer

  .more-btn
    height 50px
    overflow hidden

    span
      display block
      padding 5px 0px
      text-align center
      width 150px
      margin 12px auto
      border 1px solid rgba(46, 46, 46, 0.9)

      &:hover
        cursor pointer
</style>
